<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="系统消息" v-if="1" :border-bottom="false" id="navbarr"></u-navbar>

		<view class="content_box">
			<view class="message-content">
				<view class="message-item" v-for="(item,index) in message_list" :key="index" @click="sysinfo_detail">
					<view class="time-tipc round">{{item.time}}</view>
					<view class="card-content">
						<view class="card-detail">
							<view class="card-content">
								<view class="card-img" v-if="item.image && item.image!==''">
									<image :src="item.image" class="img"></image>
								</view>
								<view class="f-18 hidden text-left hidden">{{item.title}}</view>
								<view class="card-text hidden-2 f-26 margin-top-lg">{{item.content}}</view>
							</view>
							<view class="card-bottom flex align-center justify-between">
								<text class="f26" style="color: #232323;">查看全部</text>
								<u-icon size="22" name="arrow-right" color="#232323" style="margin-left: 8rpx;"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 消息为空 -->
			<u-empty text="消息列表为空" mode="message" style="display: none;"></u-empty>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			message_list:[{
					time:"05-14 19:22",
					image:"",
					title:"净网行动违规提示",
					content:"为了维护平台的绿色发展，为广大用户营造积极、健康的环境氛围。为了维护平台的绿色发展",
					
				},{
					time:"05-14 19:22",
					image:"../../static/img/case.png",
					title:"净网行动违规提示",
					content:"为了维护平台的绿色发展，为广大用户营造积极、健康的环境氛围。为了维护平台的绿色发展",
					
				},
			]
		};
	},
	onShow() {},
	onLoad(e) {},
	mounted() {},
	methods: {
		sysinfo_detail(){
			uni.navigateTo({
				url:'./sysinfo_detail'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {
	width: 100vw;
	height: 100vh;
	background: #F7F7F7 !important;
}
.content_box {
	.message-content{	
		padding: 0 22rpx 50rpx;
		.message-item{
			text-align: center;
			.time-tipc{
				background: #e9e9e9;
				text-align: center;
				font-size: 24rpx;
				color: #232323;
				padding: 18rpx 40rpx;
				display: inline-block;
				margin: 50rpx 0 30rpx;
			}
			.card-detail{
				background-color: white;
				padding: 30rpx;
				border-radius: 20px;
				.card-content{
					border-bottom: 1rpx solid #F7F7F7;
					.card-img{
						height: 290rpx;
						border-radius: 20rpx;
						margin-bottom: 36rpx;
						.img{
							width: 100%;
							height: 100%;
						}
					}
					.card-text{
						color: #999999;
						line-height: 50rpx;
					}
				}
				.card-bottom{
					padding-top: 30rpx;
				}
			}
		}
	}
}
</style>
